<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import UpdateAvatar from '@/components/updateAvatar/index.vue'
definePageMeta({
  layout: 'default-home',
  title: '我的',
  i18n: 'menu.profile',
})
const { t } = useI18n();
const userStore = useUserStore()
// 初始进度0%
const realProgress = ref(0)
// 目标进度80%
const targetProgress = ref(0)
/** 进度平滑递增动画 */
function animateProgress() {
  let timer = setInterval(() => {
    if (realProgress.value >= targetProgress.value) {
      clearInterval(timer)
      realProgress.value = targetProgress.value
    } else {
      realProgress.value += 1
    }
  }, 10)
}
onMounted(async () => {
  // 获取用户信息
  await userStore.getUserInfo(222)
  console.log('我的--用户信息', userStore.user);
  // 根据后端返回值决定初始化进度%
  targetProgress.value = 80
  animateProgress()
})
const open = ref(false)
const submitHandler =(v:string)=>{
  userStore.updateAvatar(v)
  open.value=false
}
</script>

<template>
  <div p-12 mx-auto text-16>
    <div class="flex flex-col items-center">
      <div class="w-40% flex flex-col items-center font-bold">
        <img class="w-66 h-66 rounded-full" :src="userStore.user.avatar" alt="" @click="open=true">
        <!-- <div> -->
        <div class="color-#1a242c">{{ userStore.user.name }}</div>
        <div class="color-#5e5e5f text-12">ID:{{ userStore.user.id }}</div>
        <!-- </div> -->
      </div>
    </div>
    <div class="bg-#ffffff p-10 my-10 rounded-10">
      <div flex justify-between items-center my-10>
        <div class="start flex items-center relative w-85 h-17 mr-10 ">
          <img class=" h-17 relative z-2 " src="/img/vipv.png" alt="">
          <div class="text-12 relative left--30 z-2  color-#ffffff">{{ 'VIP' + (userStore.user.curVip ?
            userStore.user.curVip
            : 0) }}
          </div>
        </div>
        <!-- vip进度条 -->
        <div class="vip-progress-bar">
          <div class="vip-progress-inner" :style="{ width: realProgress + '%' }"></div>
        </div>
        <div class="start flex items-center relative w-85 h-17 ml-10 ">
          <img class=" h-17 relative z-2 " src="/img/vipv.png" alt="">
          <div class="text-12 relative left--33 z-2  color-#ffffff">{{ 'VIP' + (userStore.user.curVip ?
            userStore.user.curVip :
            0 + 1) }}
          </div>
        </div>
      </div>
      <div flex justify-between items-center>
        <div>
          <div text-14 my-5>{{ t("my_page.walletBalance") }}</div>
          <div font-bold>$99999999</div>
        </div>
        <van-space>
          <van-button w-80 size="small" to="/recharge" class="bg-#f6f7ff"> {{ t("my_page.recharge") }}</van-button>
          <van-button w-80 size="small" to="/recharge/withDraw">{{ t("my_page.withDraw") }}</van-button>
        </van-space>
      </div>
    </div>
    <div class="mb-10 rounded-10 ">
      <div class="fulititle w-full bg-#ccddf9 py-6 px-12 mt-10 rounded-t-10">
        <div class="text-18 color-#ad712c font-bold">{{ t("my_page.welfareCenter") }}</div>
      </div>
      <van-grid class="rounded-b-10" :border="false">
        <van-grid-item :icon-size="40" :text="t('my_page.vipCenter')" to="/my/vip">
          <template #icon>
            <img src="/img/vip.png" alt="" class="w-38 mb-5" />
          </template>
        </van-grid-item>
        <van-grid-item :text="t('my_page.share.title')" to="/my/share">
          <template #icon>
            <img src="/img/share.png" alt="" class="w-38 mb-5" />
          </template>
        </van-grid-item>
        <van-grid-item :text="t('my_page.reward.title')" to="/my/reward">
          <template #icon>
            <img src="/img/rewards.png" alt="" class="w-38 mb-5" />
          </template>
        </van-grid-item>
        <van-grid-item :text="t('my_page.taskList')" to="/my/taskList">
          <template #icon>
            <img src="/img/task.png" alt="" class="w-38 mb-5" />
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <div>
      <van-cell :title="t('my_page.gameList.title')" is-link to="/my/gameList">
        <template #icon>
          <img src="/img/app_icon_game.png" alt="" class="w-16 h-13 mr-13" />
        </template>
      </van-cell>
      <van-cell :title="t('my_page.rechargeList')" is-link to="/recharge/list">
        <template #icon>
          <img src="/img/app_icon_cz.png" alt="" class="w-16 h-13 mr-13" />
        </template>
      </van-cell>
      <van-cell :title="t('my_page.withDrawList')" is-link to="/recharge/withDrawList">
        <template #icon>
          <img src="/img/app_icon_tx.png" alt="" class="w-16 h-13 mr-13" />
        </template>
      </van-cell>
      <van-cell :title="t('my_page.email.title')" is-link to="/my/email">
        <template #icon>
          <img src="/img/app_icon_email.png" alt="" class="w-16 h-13 mr-13" />
        </template>
      </van-cell>
      <!-- <van-cell :title="t('my_page.secureCenter')" is-link to="/">
        <template #icon>
          <img src="/img/web_icon_game.png" alt="" class="w-16 h-13 mr-13" />
        </template>
      </van-cell> -->
      <van-cell :title="t('my_page.advise.title')" is-link to="/my/advise">
        <template #icon>
          <img src="/img/app_icon_jy.png" alt="" class="w-16 h-15 mr-13" />
        </template>
      </van-cell>
      <van-cell :title="t('my_page.setting.setting')" is-link to="/my/setting">
        <template #icon>
          <img src="/img/app_icon_setting.png" alt="" class="w-16 h-13 mr-13" />
        </template>
      </van-cell>
      <van-cell :title="t('my_page.downAPK')" is-link to="/">
        <template #icon>
          <img src="/img/app_icon_downAPK.png" alt="" class="w-16 h-15 mr-13" />
        </template>
      </van-cell>
      <van-cell :title="t('my_page.addMain')" is-link to="">
        <template #icon>
          <img src="/img/app_icon_add.png" alt="" class="w-16 h-15 mr-13" />
        </template>
      </van-cell>
    </div>
    <UpdateAvatar v-model:visible="open"    @updateAvatar="submitHandler"/>
  </div>
</template>
<style lang="css" scoped>
.start {
  background: url('/img/vip-bg.png');
  background-size: 100% 100%;
}

.fulititle {
  background: url('/img/fulititle_bg.png');
  background-size: 100% 100%;
}

.vip {
  background: url('/img/vip-bg.png') no-repeat center;
  background-size: cover;
  color: #ffffff;
  /* width: 48px; */
  /* height: 20px; */
  font-size: 12px;
  border-radius: 20px;
  padding: 0 10px;
}

/* 进度条 */
.vip-progress-bar {
  width: 100%;
  height: 10px;
  background: #f7efde;
  /* background: url('/img/vip_pro_bg.png'); */
  border-radius: 16px;
  overflow: hidden;
}

.vip-progress-inner {
  height: 100%;
  /* background: linear-gradient(to right, #21c7fa, #1989fa); */
  background: url('/img/vip_pro.png') no-repeat center;
  background-size: cover;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  transition: width 1s ease;
}

::v-deep .van-cell {
  align-items: center;
  padding: 13PX;
}

::v-deep .van-button--default {
  background: #f5f7ff;
  border: 1px solid #eaf0f6;
  color: var(--c-text);
}

::v-deep .van-grid-item__icon {
  font-size: 30px;
}

::v-deep .van-grid-item:first-child .van-grid-item__content--center {
  border-bottom-left-radius: 10px;
}

::v-deep .van-grid-item:last-child .van-grid-item__content--center {
  border-bottom-right-radius: 10px;
}

::v-deep .van-cell--clickable:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

::v-deep .van-cell--clickable:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
</style>
